<template>
  <div class="home" v-loading="loading">
    <Header></Header>
    <!--          内容页-->
    <div style="background: #f5f5f5;padding-top: 25px">
      <el-row justify="center" style="padding-bottom: 95px">
        <el-col :xl="18" :lg="24">
          <div style="width: 100%;display: flex;justify-content: center">
            <el-col :span="18" style="width: 100%;background: #fff;border-radius: 10px">
              <!--                    每个文章-->
              <template v-for="item in ArticleList" :key="item.id">
                <div style="width: 98%;height: 166px;margin: 25px 10px">
                  <el-card
                      shadow="hover"
                      style="height: 100%;position: relative;"
                  >
                    <!--                          标题-->
                    <div @click="toArticleBtn(item.id)" style="cursor: pointer">
                      <span style="font-weight: 900">{{ item.title }}</span>
                    </div>
                    <!--                          简单标签-->
                    <div
                        style="display: flex;
                              color: #c5c5c5;
                              margin-left: 10px;
                              align-items: center;
                              margin-top: 5px;
                              cursor: pointer
">
                            <span style="display: flex;align-items: center">
                              <el-icon style="margin-right: 5px"><avatar/></el-icon>
                              {{ item.sort }}
                            </span>
                      <span style="display: flex;align-items: center;margin-left: 10px">
                              <el-icon style="margin-right: 5px"><position/></el-icon>
                              {{ item.author }}
                            </span>
                    </div>
                    <!--                          简介内容-->
                    <div style="margin-top: 10px">
                      <div>{{ item.content }}</div>
                    </div>
                    <div>
                      <el-button
                          round
                          color="#448aff"
                          style="position: absolute;
                                bottom: 10px;
                                color: white;
                                right: 15px"
                          size="small"
                          @click="toArticleBtn(item.id)"
                      >阅读更多
                      </el-button>
                    </div>
                  </el-card>
                </div>
              </template>
              <!--              分页-->
              <div style="float: right;padding-bottom: 20px;margin-right: 5px">
                <el-pagination background
                               hide-on-single-page
                               @current-change="newPagesBtn"
                               layout="prev, pager, next" :total="articleTotal">
                </el-pagination>
              </div>
            </el-col>
          </div>
        </el-col>
<!--        <el-col :span="4" class="hidden-sm-and-down hidden-sm-only hidden-md-only hidden-md-only hidden-lg-only">-->
<!--          <div-->
<!--              style="height: 250px;-->
<!--                    width: 250px;-->
<!--                    border: 1px solid red;-->
<!--                    display: flex;-->
<!--                    justify-content: center;-->
<!--                    align-items: center;-->
<!--                    margin-top: 20px;-->
<!--"-->
<!--          >-->
<!--            个人介绍-->

<!--          </div>-->
<!--        </el-col>-->
      </el-row>
    </div>
  </div>
  <Footer></Footer>
</template>

<script>
import Home from "./Home.js"
import Header from "../../components/Header.vue";
import Footer from "../../components/Footer.vue";
import {Avatar, Position} from "@element-plus/icons";

export default {
  name: "Home",
  components: {
    Avatar,
    Position,
    Header,
    Footer
  },
  setup() {
    return {
      ...Home(),
    }
  }
}
</script>

<style scoped>
.home {
  background: #f5f5f5;
}

</style>